<!DOCTYPE html>



<HTML>
<HEAD>
    <TITLE> ZTREE 异步测试</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../zujian/ztree/zTreeStyle/zTreeStyle.css">
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
    <script src="../zujian/ztree/jquery.ztree.core.js"></script>
    <script src="../zujian/ztree/jquery.ztree.excheck.js"></script>
    <script src="../zujian/ztree/jquery.ztree.exedit.js"></script>
    <script src="../zujian/ztree/jquery.ztree.exhide.js"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            edit: {
                enable: true,
                //编辑节点名称时候初始时候是全选
                editNameSelectAll: true,
                //    设置是否显示删除按钮。[setting.edit.enable = true 时生效]
                //         当点击某节点的删除按钮时：
                // 1、首先触发 setting.callback.beforeRemove 回调函数，用户可判定是否进行删除操作。
                // 2、如果未设置 beforeRemove 或 beforeRemove 返回 true，则删除节点并触发 setting.callback.onRemove 回调函数。
                // 默认值：true
                showRemoveBtn: true,
                //鼠标移动到删除子节点时候显示的信息
                removeTitle: "删除节点",
                //是否显示编辑名字的按钮
                showRenameBtn: true,
                //鼠标放在编辑名字上的显示
                renameTitle: "编辑节点名称",
                //拖拽
                drag: {
                    /**
                     拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]
                     默认值：false
                     true / false 分别表示 触发 / 不触发 onExpand 事件回调函数。
                     * */
                    autoExpandTrigger: true,
                    /**
                     1、isCopy = true; isMove = true 时，拖拽节点按下 Ctrl 或 Cmd 键表示 copy; 否则为 move
                     2、isCopy = true; isMove = false 时，所有拖拽操作都是 copy
                     3、isCopy = false; isMove = true 时，所有拖拽操作都是 move
                     4、isCopy = false; isMove = false 时，禁止拖拽操作
                     * */
                    //拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]
                   // 默认值：true
                    isCopy: true,
                    //拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
                    //默认值：true
                    isMove: true,
                    /**
                     拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]
                     拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                     此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 next、inner 一起使用，才能实现完整功能。
                     默认值：true
                     true / false 分别表示 允许 / 不允许 移动到目标节点前面
                     * */
                    prev:true,
                    /**
                     拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]
                     拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                     此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 prev、inner 一起使用，才能实现完整功能。
                     默认值：true
                     * */
                    next: true,
                    /**
                     拖拽到目标节点时，设置是否允许成为目标节点(必须是isParent为true的,即必须拖拽到父节点)的子节点。[setting.edit.enable = true 时生效]
                     拖拽目标是 根 的时候，不触发 prev 和 next，只会触发 inner
                     此功能主要作用是对拖拽进行适当限制（辅助箭头），需要结合 prev、next 一起使用，才能实现完整功能。
                     默认值：true
                     * */
                    inner: true,
                    /**
                     拖拽节点成为根节点时的 Tree 内边界范围 (单位：px)。[setting.edit.enable = true 时生效]
                     默认值：10
                     * */
                    borderMax: 20,
                    /**
                     判定是否拖拽操作的最小位移值 (单位：px)。[setting.edit.enable = true 时生效]
                     根据自己的需求可适当调整此值，如果太小容易导致点击鼠标时误操作进行拖拽
                     默认值：5
                     * */
                    minMoveSize: 20,
                    /**
                     拖拽多个兄弟节点时，浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]
                     默认值：5
                     请根据自己的需求适当调整此值
                     * */
                    maxShowNodeNum: 10,
                    /**
                     拖拽时父节点自动展开的延时间隔。 (单位：ms)[setting.edit.enable = true 时生效]
                     默认值：500
                     请根据自己的需求适当调整此值
                     * */
                    autoOpenTime: 6000,

                }
            },
            view: {
                /**
                 用于在节点上固定显示用户自定义控件
                 1. 大数据量的节点加载请注意：在 addDiyDom 中针对每个节点 查找 DOM 对象并且添加新 DOM 控件，
                 肯定会影响初始化性能；如果不是必须使用，建议不使用此功能
                 2. 属于高级应用，使用时请确保对 zTree 比较了解。
                 默认值：null
                 * */
                addDiyDom:null,
                //点击节点时，按下 Ctrl 或 Cmd 键是否允许取消选择操作。
                //如果不需要此功能，请设置为 false。
                //默认值: true
                // true / false 分别表示 支持 / 不支持 配合 Ctrl 或 Cmd 键进行取消节点选择的操作
                autoCancelSelected: false,
                //  true / false 分别表示双击节点 切换 / 不切换 展开状态
                dblClickExpand: true,
                //三种预定速度之一的字符串("slow", "normal", or "fast")
                //设置为 "" 时，不显示动画效果
                expandSpeed: "fast",
                //节点文字显示样式。个性化文字样式，只针对 zTree 在节点上显示的<A>对象。
                //默认值：{}  比如  {color:"red", background:"blue"}
                fontCss : {color:"red"},
                //设置 name 属性是否支持 HTML 脚本
                //如果允许 HTML 脚本，请根据自己的需求做校验，避免出现 js 注入等安全问题。
                //默认值: false
                //true / false 分别表示 支持 / 不支持 HTML 脚本
                nameIsHTML: true,
                //设置是否允许同时选中多个节点。
                selectedMulti:true,
                //显示节点图标 默认 true
                showIcon:true,
                //是否显示节点之间的连线
                showLine:true,
                /**
                 设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。
                 请务必与 setting.data.key.title 同时使用。
                 默认值：true
                 * */
                showTitle: false,
                /**
                 设置 zTree 是否允许可以选择 zTree DOM 内的文本。
                 默认值：false
                 * */
                txtSelectedEnable: true,
                /**
                 用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
                 请务必与 setting.view.removeHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
                 默认值：null
                 * */
                addHoverDom: null,
                //用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
                //请务必与 addHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
                //默认值：null
                removeHoverDom: null,
            },
            data: {
                keep: {
                    /**
                     zTree 的节点叶子节点属性锁，是否始终保持 isParent = false
                     默认值：false
                     true / false 分别表示 锁定 / 不锁定 叶子节点属性
                     如果设置为 true，则所有 isParent = false 的节点，都无法添加子节点
                     * */
                    leaf: true,
                    /**
                     zTree 的节点父节点属性锁，是否始终保持 isParent = true
                     默认值：false
                     true / false 分别表示 锁定 / 不锁定 父节点属性
                     如果设置为 true，则所有 isParent = true 的节点，即使该节点的子节点被全部删除或移走，依旧保持父节点状态。
                     * */
                    parent: true
                },
                /**
                 true / false 分别表示 使用 / 不使用 简单数据模式
                 如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数:
                 idKey / pIdKey / rootPId，并且让数据满足父子关系。
                 * */
                simpleData: {
                    enable: true,
                    // 节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
                    //默认值："id"
                    idKey: "id",
                    //节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
                    //默认值："pId"
                    pIdKey: "pId",
                    //用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
                    //默认值：null
                    rootPId: 0
                },
                //key里面就是自定义属性名称名 字的地方
                key: {
                    //zTree 节点数据中保存 check 状态的属性名称。查看是否选择用
                    // treeNode.下面设置的属性名
                    checked: "checked",
                    // zTree 节点数据中保存子节点数据的属性名称。
                    //  默认值："children"
                    //设置成如下,如果要取该节点所有的子节点, 则用 treeNode.nodes
                    children: "children",
                    //zTree 节点数据保存节点是否为父节点的属性名称。
                    //默认值："isParent"
                    isParent: "isParent",
                    //zTree 节点数据保存节点是否隐藏的属性名称。
                    // 默认值："isHidden"
                    isHidden: "isHidden",
                    //  zTree 节点数据保存节点名称的属性名称。
                    // 默认值："name"
                    name: "name",
                    //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
                    //如果设置为 "" ，则自动与 setting.data.key.name 保持一致，避免用户反复设置
                    // 默认值：""
                    title: "title",
                    //设置url在节点的属性名称
                    url:"url"
                }
            },
            async: {
                // 异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
                //默认值：[ ]
                enable: true,
                //如果返回的 isParent为false,该项将不能点击
                // [{ id:'01',	name:'n1',	isParent:true},{ id:'02',	name:'n2',	isParent:false},{ id:'03',	name:'n3',	isParent:true},{ id:'04',	name:'n4',	isParent:false}]
                url:"http://127.0.0.1:80/phpTestZtree/phptestztree02.php",
                //pid,n, lv,都是后端接收参数的时候用的  id ,name,level是前端用的,这个对应是传参用的,后台接受的对照,前面是ztree的后面是后端的
                autoParam:["id=pid", "name=n", "level=lv"],
                type:"post",contentType:"application/x-www-form-urlencoded",
                //传入其他自定义参数给后台
                otherParam:{"otherParam":"zTreeAsyncTest"},
                //用于修改ajax返回的数据
                dataFilter: filter1,
                //Ajax 获取的数据类型。[setting.async.enable = true 时生效]
                //默认值："text"
                dataType:"text",
                // 请参考 jQuery ajax 中的 headers 参数
                headers:{},


            },
            callback:{
                // 用于捕获节点被点击的事件回调函数
                onClick:clicktest01,
                // 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
                onCheck:check1,

            },
            check:{
                enable: true,   //true / false 分别表示 显示 / 不显示 复选框或单选框
                // 当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true
                // chkDisabledInherit: true,
                //设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。
                // [setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
                autoCheckTrigger: true,   //true / false 分别表示 触发 / 不触发 事件回调函数
                // chkStyle = "checkbox" 时，显示 checkbox 选择框，setting.check.chkboxType 属性有效。
                // chkStyle = "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。
                chkStyle: "checkbox",   //勾选框类型(checkbox 或 radio）
                // chkStyle: "radio",
                // Y 属性定义 checkbox 被勾选后的情况；
                //N 属性定义 checkbox 取消勾选后的情况；
                // "p" 表示操作会影响父级节点；
                // "s" 表示操作会影响子级节点。
                // 请注意大小写，不要改变
                chkboxType: { "Y": "s", "N": "s" } ,  //勾选 checkbox 对于父子节点的关联关系
                // radioType = "level" 时，在每一级节点范围内当做一个分组。
                // radioType = "all" 时，在整棵树范围内当做一个分组。
                // radioType:"level",

                // true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
                // false 表示 新加入子节点时，不继承父节点 nocheck 的属性。
                //nocheck ,在后端返回的节点参数里有nocheck时候用,如果是nocheck：true表示该节点没有复选框
                nocheckInherit:true,
                //true 表示 新加入子节点时，自动继承父节点 chkDisabled = true 的属性。
                //false 表示 新加入子节点时，不继承父节点 chkDisabled 的属性。
                //[setting.check.enable = true 时生效]
                //Disabled就是能看到但是不能操作点击等
                chkDisabledInherit:true,
            },
        };

        function check1(event, treeId, treeNode) {
            // alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.isChecked);
        }
        function filter1(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            // for (var i=0, l=childNodes.length; i<l; i++) {
            // 	childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            // }
            //用过滤器将数据库取出来的json字符串转换更换成ztree的字段后在变成对象
            // return JSON.parse(   JSON.stringify(childNodes).replace("icon1","icon")   );
            try {
                childNodes.forEach(v=>{
                    try {
                        //凭空造一个icon等于icon1
                        v.icon=v.icon1;
                        //删除前端不用的icon1
                        delete v.icon1;
                    } catch (e) {}
                })
            } catch (e) {}
            return childNodes;
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
        });

        function clicktest01(event, treeId, treeNode) {
            //弹出该节点的url1地址
            if(treeNode.url1){//有值的时候
                alert(treeNode.url1);
            }

        }
        //-->
    </SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
</BODY>
</HTML>